<template>

		<z-paging ref="paging"  v-model="voidePageDataList" @query="queryList" :default-page-size="10">
			<view  v-for="(item,index) in voidePageDataList" :key="index">		
			<fui-row margin-bottom="24rpx">
				<fui-col :span="12" @click="getDetail(voidePageDataList[index].id)">
					<view v-if="index%2==0" class="video-container" >
					 <view class="video-title">{{voidePageDataList[index].videoName}}</view>
						  <image   :src="this.$request.baseUrl+voidePageDataList[index+1].videoConverPath"/>
					<view class="video-title">{{voidePageDataList[index].courseMasterTeam}} vs{{voidePageDataList[index].courseAwayTeam}}</view>
					</view>
					
				</fui-col> 
				<fui-col :span="12" @click="getDetail(voidePageDataList[index+1].id)">
					<view v-if="index%2==0"  class="video-container">
					<view class="video-title">{{voidePageDataList[index+1].videoName}}</view>
					  <image   :src="this.$request.baseUrl+voidePageDataList[index+1].videoConverPath"/>
					  <view class="video-title">{{voidePageDataList[index+1].courseMasterTeam}} vs{{voidePageDataList[index+1].courseAwayTeam}}</view>
					</view> 
					  
				</fui-col>
			</fui-row>
			 </view>
		</z-paging> 

</template>

<script>
	export default {
		data() {
			return {
				voidePageDataList:[],
				queryForm:{
					 pageNum:1,
					pageSize:10,
					param:{}
				}
			}
		},
		methods: {
			queryList(pageNo, pageSize) {
				this.queryForm.pageNum=pageNo;
				this.queryForm.pageSize=pageSize;
				 this.$request.post('video/list',this.queryForm).then(res => {
					
				 	 this.$refs.paging.complete(res.data.dataList);
				 }).catch(res => {
			    	this.$refs.paging.complete(false);
			    })
			},
			getDetail(videoId){
				uni.navigateTo({
					url: '/pages/views/videoDetail?videoId='+videoId
				});
				
			}
		}
	}
</script>

<style>
.video-container {
		  padding: 10px;
	
		  background-color: #fff;
		  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
		  border-radius: 16px; /* 圆角 */
		  height: 300px;
		}
		.video-title {
		  color: black;
		  padding: 5px;
		  font-size: 16px;
		}
</style>
